
<template>
  <div class="container">
    <!-- 左侧翻页按钮 -->
    <button
        class="page-button left"
        :disabled="currentPage === 1"
        @click="handlePrevPage"
    >
      ‹
    </button>
    <div class = "title" :key="currentPage">
      <p>{{ getTitle() }}</p>
    </div>
    <div class="content">
      <div v-if="currentPage === 1">
        <CapabilityEvaluation></CapabilityEvaluation>
      </div>
      <div v-if="currentPage === 2">
        <EventAnalysis></EventAnalysis>
      </div>
      <div v-if="currentPage === 3">
        <Feedback></Feedback>
      </div>
      <div v-if="currentPage === 4">
        <Suggestion></Suggestion>
      </div>
    </div>

    <!-- 右侧翻页按钮 -->
    <button
        class="page-button right"
        :disabled="currentPage === totalPages"
        @click="handleNextPage"
    >
      ›
    </button>

    <!-- 页码显示 -->
    <div class="page-indicator">
      {{ currentPage }}/{{ totalPages }}
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import CapabilityEvaluation from "@/views/analysisReport/components/capabilityEvaluation.vue";
import EventAnalysis from "@/views/analysisReport/components/eventAnalysis.vue"
import Feedback from "@/views/analysisReport/components/feedback.vue"
import Suggestion from "@/views/analysisReport/components/suggestion.vue"
import router from "@/router";
const currentPage = ref(1)
const totalPages = 4

const title = ref(['能力维度评分', '关键事件分析', '反馈报告整合', '留下您宝贵的意见'])

const getTitle = () => {
  return title.value[currentPage.value - 1]
}
const handlePrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    // 这里可以添加实际翻页逻辑
  }
}

const handleNextPage = () => {
  if (currentPage.value < totalPages) {
    currentPage.value++
    // 这里可以添加实际翻页逻辑
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #e8f4f8 100%);
  //background-color: #f0f4ff;
  min-height: 100vh;
  min-width: 100vw;
  position: relative;
  justify-content: center;
  align-items: center;
}

.header {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* 确保它在其他内容之上 */
}

.back-button {
  margin-left: 10px; /* 距离左边的间距 */
  margin-top: 10px; /* 距离上边的间距 */
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 48px;
}

.back-button:hover {
  color: #333;
}

.title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.title p {
  font-size: 40px;
  font-weight: bolder;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 20px;
  animation: slideInFromTop 0.5s ease-out forwards;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: #ffffff;
  //border-radius: 10px;
  height: 100vh;
  width: 100vw;
}

.page-button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: translateY(-50%);
  }

  &.left {
    left: 20px;
  }

  &.right {
    right: 20px;
  }
}

.page-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
}
</style>